<template>
  <div class="electronic_list">
    <div class="search-box">
      <Row type="flex" justify="space-between">
        <Row type="flex">
          <Col class="search-item">
            <span class="search-label">产品名称:</span>
            <Input
              v-model="searchObj.prodcutName"
              @on-keyup="filterSpace"
               suffix="ios-search"
              search
              @on-search="search"
              :maxlength="30"
              placeholder="请输入"
            ></Input>
          </Col>
          <Col class="search-item">
            <span class="search-label">产品状态:</span>
            <Select v-model="searchObj.productStatus" style="width:200px" @on-change="search" clearable>
              <Option
                v-for="item in statusList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
          </Col>
        </Row>
        <Row>
          <Col class="search-item" style="margin-right:30px;">
            <Button class="search-btn" type="primary" @click="doSearch" v-if="hasPermission('moms:globalsetting:redeemcodecreate')">添加产品</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Table
      :loading="loading"
      :height="this.tableHeight"
      ref="selection"
      :columns="columns"
      :data="partyList"
      stripe
      class="table-list"
    >
      <template slot-scope="{ row }" slot="ecodeType">
        <span>{{['静态','动态'][row.ecodeType]}}</span>
      </template>
      <template slot-scope="{ row }" slot="productStatus">
        <span>{{['已激活','已作废'][row.productStatus]}}</span>
      </template>
      <template slot-scope="{ row }" slot="channelNames">
        <span v-if="row.channelNames.length<11">{{row.channelNames}}</span>
        <Poptip word-wrap width="200" :content="row.channelNames" trigger="hover"  v-if="row.channelNames.length>11">
          <div class="electronic_list_td" v-if="row.channelNames.length>11">{{row.channelNames}}</div>
        </Poptip>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <i class="iconsys icondetail" @click="look(row,index)" title="查看详情" v-if="hasPermission('moms:globalsetting:redeemcodeinfo')"></i>
        <i class="iconsys iconchanpinxiangqing" @click="eledetail(row,index)" title="电子码详情" v-if="hasPermission('moms:globalsetting:redeemcodedetail')"></i>
        <i class="iconsys icondaochu" @click="exportd(row)" title="预生成导出" v-if="hasPermission('moms:globalsetting:redeemcodeexport')&&row.productStatus===0&&row.generatedStatus===1"></i>
        <i class="iconsys iconyanqi" title="延期电子码" @click="delay(row)" v-if="hasPermission('moms:globalsetting:redeemcoderenew')&&row.productStatus===0"></i>
        <Poptip
          confirm
          title="是否确认作废"
          @on-ok="ok(row, index)"
          @on-cancel="cancel"
          class="poptip_del"
        >
          <i class="iconsys iconzuofei" title="作废电子码"  v-if="hasPermission('moms:globalsetting:redeemcoderecancel')&&row.productStatus===0"></i>
        </Poptip>
        <!-- <Poptip
          confirm
          title="你确定要删除吗？"
          @on-ok="ok(row, index)"
          @on-cancel="cancel"
          class="poptip_del"
        >
          <i class="iconsys icondel" title="删除"></i>
        </Poptip>-->
      </template>
    </Table>
    <div class="page-box">
      <Page
        :total="pageObj.total"
        :page-size="pageObj.pageSize"
        :current="pageObj.pageIndex"
        :page-size-opts="[10, 20, 50, 100]"
        show-total
        show-sizer
        @on-change="changePageIndex"
        @on-page-size-change="changePageSize"
      />
    </div>
    <Modal v-model="modalShow" width="480" title="修改延期时间" :closable="false">
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="110"
        style="margin:20px 0 0 15px"
      >
        <FormItem label="有效期类型：" prop="periodType">
          <Select v-model="formValidate.periodType" style="width:200px" disabled>
            <Option v-for="item in periodList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="延期结束时间：" prop="endAt" v-if="formValidate.periodType===0">
          <DatePicker
            type="date"
            :editable="editable"
            :options="delistingTimeOptions"
            v-model="formValidate.endAt"
            placeholder="请选择"
            style="width: 200px"
          ></DatePicker>
        </FormItem>
        <FormItem label="延期天数：" prop="days" v-if="formValidate.periodType===1">
          <Input
            v-model="formValidate.days"
            :maxlength="4"
            placeholder="请输入"
            style="width: 200px"
          ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button style="width:78px;margin-right:10px" @click="back">返回</Button>
        <Button type="primary" style="width:78px" @click="startTransfer">提交</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { geteCodeProductList, invalidCodeProduct, ecodeProductExport, periodEcode } from '@/api/system/fishing.js'
import { mapState } from 'vuex'
import { blobToXls } from '@/libs/blobToXls'
import dayjs from 'dayjs'
export default {
  name: 'electronic_list',
  data () {
    return {
      ecodeProductId: '',
      searchObj: {
        prodcutName: '',
        productStatus: ''
      },
      loading: false,
      editable: true,
      tableHeight: 0,
      delistingTimeOptions: {},
      formValidate: {
        periodType: '',
        beginAt: '',
        endAt: '',
        days: ''
      },
      ruleValidate: {
        // periodType: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
        days: [{ required: true, message: '延期天数', trigger: 'blur' }],
        endAt: [{ required: true, message: '请选择延期结束时间' }]
      },
      pageObj: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      partyList: [],
      periodList: [{ value: 0, label: '指定时间段' }, { value: 1, label: '相对时间段' }],
      dataList: [
        {
          value: '1',
          label: '指定时间段'
        },
        {
          value: '2',
          label: '相对时间段'
        }
      ],
      modalShow: false,
      columns: [
        {
          title: 'ID',
          key: 'ecodeProductId',
          align: 'center',
          width: 200
        },
        {
          title: '产品名称',
          key: 'prodcutName',
          align: 'center',
          width: 100
        },
        {
          title: '合作方名称',
          key: 'partnerName',
          align: 'center'
        },
        {
          title: '合作渠道',
          slot: 'channelNames',
          width: 200,
          align: 'center'
        },
        {
          title: '电子码类型',
          slot: 'ecodeType',
          align: 'center',
          width: 100
        },
        {
          title: '生成数量',
          key: 'ecodeQty',
          align: 'center',
          width: 100
        },
        {
          title: '产品状态',
          slot: 'productStatus',
          align: 'center',
          width: 100
        },
        {
          title: '操作时间',
          key: 'updatedAt',
          align: 'center'
        }
        // {
        //   title: '操作',
        //   width: 400,
        //   slot: 'action',
        //   align: 'center'
        // }
      ],
      statusList: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 0,
          label: '已激活'
        },
        {
          value: 1,
          label: '已作废'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      userId: state => state.user.userId,
      userName: state => state.user.userName
    })
  },
  watch: {
    '$route' (newRoute) {
      if (newRoute.name === 'electronic_list') {
        this.pageObj.pageIndex = 1
        this.getlist()
      }
    }
  },
  mounted () {
    this.getlist()
    if (this.hasPermission(['moms:globalsetting:redeemcodeinfo', 'moms:globalsetting:redeemcodedetail', 'moms:globalsetting:redeemcodeexport', 'moms:globalsetting:redeemcoderenew', 'moms:globalsetting:redeemcoderecancel'])) {
      this.columns.push({
        title: '操作',
        width: 300,
        slot: 'action'
      })
    }
  },
  methods: {
    getlist () {
      this.loading = true
      geteCodeProductList({
        merchantId: this.merchantId,
        prodcutName: this.searchObj.prodcutName,
        productStatus: this.searchObj.productStatus === -1 ? '' : this.searchObj.productStatus,
        offset: (this.pageObj.pageIndex - 1) * this.pageObj.pageSize,
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        if (res.data.status === 200) {
          this.partyList = res.data.data
          this.pageObj.total = res.data.totalCount
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    exportd (row) {
      ecodeProductExport({
        merchantId: this.merchantId,
        ecodeProductId: row.ecodeProductId,
        creator: this.userId,
        creatorName: this.userName
      }).then(res => {
        if (res.status === 200) {
          blobToXls(res.data, '电子码产品表')
        }
      })
    },
    search () {
      this.pageObj.pageIndex = 1
      this.getlist()
    },
    doSearch () {
      this.$router.push({ name: 'electronic_create', params: { id: 1 } })
    },
    filterSpace () {
      this.searchObj.prodcutName = this.searchObj.prodcutName ? this.searchObj.prodcutName.replace(/\s+/g, '') : ''
    },
    look (row) {
      console.log('row.ecodeProductId', row.ecodeProductId)
      this.$router.push({ name: 'electronic_detail', query: { id: row.ecodeProductId } })
    },
    eledetail (row) {
      this.$router.push({ name: 'electronic_list_detail', query: { id: row.ecodeProductId } })
    },
    uptShow () {
    },
    ok (row) {
      invalidCodeProduct({
        merchantId: this.merchantId,
        ecodeProductId: row.ecodeProductId,
        updater: this.userId,
        updaterName: this.updaterName
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('作废成功')
          this.getlist()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    cancel () { },
    back () {
      this.modalShow = false
    },
    delay (row) {
      this.modalShow = true
      this.$refs.formValidate.resetFields()
      this.formValidate.periodType = row.periodType
      this.formValidate.beginAt = row.beginAt
      this.ecodeProductId = row.ecodeProductId
      this.delistingTimeOptions = {
        disabledDate (date) {
          return date.valueOf() < new Date(row.endAt).getTime()
        }
      }
    },
    startTransfer () {
      this.modalShow = false
      this.$refs.formValidate.validate((val) => {
        if (val) {
          periodEcode({
            merchantId: this.merchantId,
            ecodeProductId: this.ecodeProductId,
            periodType: this.formValidate.periodType,
            beginAt: this.formValidate.beginA ? dayjs(this.formValidate.beginAt).format('YYYY-MM-DD 00:00:00') : '',
            endAt: this.formValidate.endAt ? dayjs(this.formValidate.endAt).format('YYYY-MM-DD 23:59:59') : '',
            days: this.formValidate.days,
            updater: this.userId,
            updaterName: this.userName
          }).then(res => {
            if (res.data.status === 200) {
              this.$Message.success('延期成功')
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }
      })
    },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getlist()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      this.getlist()
    }
  }
}
</script>
<style lang="less">
.electronic_list .ivu-poptip-confirm .ivu-poptip-body .ivu-icon {
  left: 10px;
}
.electronic_list .electronic_list_td{
  width: 150px;
  overflow:hidden;
  text-overflow:ellipsis;/*文字溢出的部分隐藏并用省略号代替*/
  white-space:nowrap;/*文本不自动换行*/
}
</style>
